<template>
    <div>
        <title1></title1>

        <!--头部面包屑-->
        <div class="breadCrumbBox flexCenter" ref="logoTop" style="position: fixed;top: 100px;">
          <div style="width: 1200px;height: 100%;" class="flexAlignCenter">
            <a-breadcrumb separator=">">
              <a-breadcrumb-item><router-link :to="projectDetails">京沪高速公路新沂至淮安段改扩建工程</router-link></a-breadcrumb-item>
              <a-breadcrumb-item><router-link :to="fuConstruction">江苏省交通工程集团有限公司</router-link></a-breadcrumb-item>
              <a-breadcrumb-item><router-link :to="laborUnit">南京仁泰基础工程有限公司</router-link></a-breadcrumb-item>
              <a-breadcrumb-item><router-link :to="teamGroup">路基施工一队</router-link></a-breadcrumb-item>
              <a-breadcrumb-item>王志</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
        </div>

        <div class="salaryDetailsBox flexBetween">
            <div class="salaryLogoBox">
                <img style="width: 100%;height:100%;" src="../../assets/gongzidan.jpg" alt="">
            </div>
            <div class="unitDetailsBox">
                <p class="payrollTitle">2020年12月路基班组工资单</p>
                <div class="payrollDetailBox">
                    <div>
                        <span>班组：<router-link :to="teamGroup">路基施工一队</router-link></span>
                        <span>劳务单位：<router-link :to="laborUnit">南京仁泰基础工程有限公司</router-link></span>
                        <span>工资月份：2020年12月</span>
                    </div>
                    <div>
                        <span>填报日期：2020-12-29</span>
                        <span>实发日期：2020-12-29</span>
                        <span>发放人数：23</span>
                    </div>
                    <div>
                        <span>发放总额：8547158元</span>
                    </div>
                    <div>
                        <span>工资确认单：<span style="color: #2F80ED;cursor: pointer;" @click="pdfView">应发工资签字确认单.pdf</span></span>
                    </div>
                    <div>
                        <span>银行支付凭证：<span style="color: #2F80ED;cursor: pointer;" @click="pdfView">银行发放流水.pdf</span></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="payrollBox">
            <div class="titleBox flexBetween flexAlignCenter">
                <div class="payrollTitle">工资清单</div>
                <div><a-input-search placeholder="请输入姓名查询" style="width: 250px" @search="onSearch" /></div>
            </div>
            <div class="payrollTableBox" style="margin-top: 30px;">
              <a-table :columns="columns" :data-source="data">
                  <a @click="goPerson" slot="name" slot-scope="text">{{ text }}</a>
              </a-table>
            </div>
        </div>

        <a-modal v-model="visible" :bodyStyle="{border: '1px solid #EAEAEA'}" :closable="false" :footer="null" :centered="true">
            <embed width="1000" height="500" src="http://it-jhkj.zhinengjianshe.com/uploadfile/temp/device/2cd6a578de5d447cbcc70fd857b3b31c/2cd6a578de5d447cbcc70fd857b3b31c.pdf" type="">
        </a-modal>
        <div style="height: 52px;"></div>
        <supportCompany></supportCompany>
    </div>
</template>

<script>
    const columns = [
        {
          title: '序号',
          dataIndex: 'no',
          key: 'no'
        },
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '岗位',
          dataIndex: 'post',
          key: 'post'
        },
        {
          title: '身份证号',
          dataIndex: 'idNumber',
          key: 'idNumber'
        },
        {
          title: '进场时间',
          dataIndex: 'entryTime',
          key: 'entryTime'
        },
        {
          title: '合同工资',
          dataIndex: 'contractSalary',
          key: 'contractSalary'
        },
        {
          title: '出勤天数',
          dataIndex: 'attendanceDays',
          key: 'attendanceDays'
        },
        {
          title: '实发工资',
          dataIndex: 'netSalary',
          key: 'netSalary'
        }
    ];
    const data = [
        {
          key: '1',
          no: '1',
          name: '王志',
          post: '普工',
          idNumber: '320*****3010',
          entryTime: '2020-02-12',
          contractSalary: '3000',
          attendanceDays: '24',
          netSalary: '1847'
        },
        {
          key: '2',
          no: '2',
          name: '潘海涛',
          post: '普工',
          idNumber: '320*****3101',
          entryTime: '2020-02-12',
          contractSalary: '3000',
          attendanceDays: '24',
          netSalary: '1847'
        },
        {
          key: '3',
          no: '3',
          name: '王全',
          post: '普工',
          idNumber: '320*****3210',
          entryTime: '2020-02-12',
          contractSalary: '3000',
          attendanceDays: '24',
          netSalary: '1847'
        },
        {
          key: '4',
          no: '4',
          name: '李海',
          post: '普工',
          idNumber: '320*****4565',
          entryTime: '2020-02-12',
          contractSalary: '3000',
          attendanceDays: '24',
          netSalary: '1847'
        },
        {
          key: '5',
          no: '5',
          name: '李志同',
          post: '普工',
          idNumber: '320*****4810',
          entryTime: '2020-02-12',
          contractSalary: '3000',
          attendanceDays: '24',
          netSalary: '1847'
        },
        {
          key: '6',
          no: '6',
          name: '张全义',
          post: '普工',
          idNumber: '320*****572X',
          entryTime: '2020-02-12',
          contractSalary: '3000',
          attendanceDays: '24',
          netSalary: '1847'
        }
    ];
    import title1 from "@/views/title/index.vue";
    import supportCompany from "@/views/supportCompany/index.vue"

    export default{
      mounted() {
        window.scrollTo(0,0);
      },
      components:{
            title1,
            supportCompany
        },
        data(){
            return {
                projectDetails: '/projectDetails',
                fuConstruction: '/fu/construction',
                laborUnit: '/laborUnit',
                teamGroup: '/teamGroup',
                columns,
                data,
                visible: false
            }
        },
        methods:{
            pdfView() {
                this.visible = true;
              // window.open('http://it-jhkj.zhinengjianshe.com/uploadfile/temp/device/2cd6a578de5d447cbcc70fd857b3b31c/2cd6a578de5d447cbcc70fd857b3b31c.pdf')
            },
            goPerson() {
                this.$router.push({path: '/personnelInformation'})
            },
            onSearch() {

            }
        }
    }
</script>

<style scoped>
    div, p, span{
        font-family: "Microsoft YaHei";
      }
    .breadCrumbBox{
        width: 100%;
        height: 40px;
        background-color: rgba(246, 248, 249, 1);
    }
    ::v-deep .ant-breadcrumb > span:last-child{
        color: rgba(20, 146, 255, 1);
      }
    .salaryDetailsBox{
        width: 1200px;
        margin: auto;
        margin-top: 40px;
    }
    .salaryLogoBox{
        width: 140px;
        height: 140px;
    }
    .unitDetailsBox{
        width: 1020px;
    }
    .payrollTitle{
        color: #333333;
        font-size: 24px;
        font-weight: 400;
    }
    .payrollDetailBox{
        width: 100%;
        height: 320px;
        background-color: #F5FAFF;
    }
    .payrollDetailBox > div > span{
        font-size: 15px;
        color: #333;
        font-weight: 400;
        display: inline-block;
        width: 270px;
        margin-top: 33px;
        margin-left: 30px;
    }
    .payrollBox{
        width: 1200px;
        margin: auto;
        margin-top: 70px;
    }
    .ant-table-header-column{
        color: red;
    }
    ::v-deep .ant-modal    {
        width: 1000px !important;
      }
    ::v-deep .ant-modal-body{
        padding: 0 !important;
    }
</style>
